<template>
	<div>
		<!-- 面包屑导航条 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/type'}">项目分类</el-breadcrumb-item>
			<el-breadcrumb-item>项目分类列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片式内容区 -->
		<el-card class="box-card">
			<!-- 搜索框 -->
			<div style="margin-top: 15px; width: 200px; display: inline-block; padding-right: 20px;">
				<el-input placeholder="请输入内容" class="input-with-select" @click="queryAll" v-model="queryInfo.name"
					clearable>
					<el-button slot="append" icon="el-icon-search" style="width: 50px;" @click="queryAll"></el-button>
				</el-input>
			</div>
			
			<el-button type="primary" @click="addDialogVisible = true">添加项目分类</el-button>
			<!-- 列表显示区 -->
			<el-table :data="typeList" style="width: 100%" height="400" border>

				<el-table-column prop="id" label="编号" width="100">
				</el-table-column>
				<el-table-column prop="name" label="项目分类名称" width="120">
				</el-table-column>
				<el-table-column prop="remark" label="项目分类描述" width="200">
				</el-table-column>

				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="primary" icon="el-icon-edit" size="mini" @click="queryById(scope.row.id)">修改
						</el-button>
						<el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row.id)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			
			
			<!-- 添加项目分类信息 -->
			<el-dialog title="添加项目分类" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
				<el-form :model="addForm"  ref="addFormRef" labelwidth="70px">
					<el-form-item label="项目分类名" prop="name">
						<el-input v-model="addForm.name"></el-input>
					</el-form-item>
					<el-form-item label="项目分类描述" prop="remark">
						<el-input v-model="addForm.remark"></el-input>
					</el-form-item>
				</el-form>
				<!-- 对话框底部区域 -->
					<span slot="footer" class="dialog-footer">
						<el-button @click="addDialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="add">确 定</el-button>
					</span>
				</el-dialog>	
				
				
				<!-- 修改项目分类信息 -->
				<el-dialog title="修改项目分类信息" :visible.sync="updateDialogVisible" width="50%" @close="addDialogClosed">
					<el-form :model="updateForm"  ref="addFormRef" labelwidth="70px">
						<el-form-item label="项目分类名" prop="name">
							<el-input v-model="updateForm.name"></el-input>
						</el-form-item>
						<el-form-item label="项目分类描述" prop="remark">
							<el-input v-model="updateForm.remark"></el-input>
						</el-form-item>
				
					</el-form>
					<!-- 对话框底部区域 -->
					<span slot="footer" class="dialog-footer">
						<el-button @click="updateDialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="update">确 定</el-button>
					</span>
				</el-dialog>

			<el-pagination @current-change="handleCurrentChange" :current-page="queryInfo.pageNum" :page-size="2"
				layout="total, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				queryInfo: {
					name: '',
					pageNum: 1
				},
				typeList: [],
				total: 0,
				addDialogVisible: false,
				updateDialogVisible:false,
				addForm: {
					name: '',
					remark: ''
				},			
				updateForm:{
				}
			}
		},
		mounted() {
			this.queryAll();
		},
		methods: {
			async queryAll() {
				var params = new URLSearchParams();
				params.append("pageNum", this.queryInfo.pageNum)
				params.append("name", this.queryInfo.name)
				const res = await this.$http.post('selectTypeByName', params)
				this.typeList = res.data.data.list;
				this.total = res.data.data.total;
			},
			handleCurrentChange(current) {
				this.queryInfo.pageNum = current
				this.queryAll()
			},
			addDialogClosed() {
				this.$refs.addFormRef.resetFields();
			},
			async add(){
				var params = new URLSearchParams();
				params.append("name", this.addForm.name)
				params.append("remark", this.addForm.remark)
				const res = await this.$http.post('insertType', params)
				console.log(res.data)
				this.addForm.name=''
				this.addForm.remark=''
				this.addDialogVisible=false	
				this.queryAll()
			},
			async queryById(id){
				const res = await this.$http.post('selectTypeById?id='+id)
				console.log(res.data)
				this.updateForm.id=id
				this.updateForm=res.data.data
				this.updateDialogVisible=true
			},
			async update(){
				console.log(this.updateForm)
				var params = new URLSearchParams();
				params.append("id",this.updateForm.id)
				params.append("name", this.updateForm.name)
				params.append("remark", this.updateForm.remark)
				const res = await this.$http.post('updateType', params)
				this.updateForm={}
				this.updateDialogVisible=false
				this.queryAll()
			},
		    del(id){
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					const res = await this.$http.post('deleteTypeById?id=' + id)
					this.$message({
						type: 'success',
						message: '删除成功!',
					});
					this.queryAll()
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		}
	}
</script>

<style>
</style>
